/* 全局 */
#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
a {color: #333;text-decoration: none;}
a:hover, a:focus {color: #000;text-decoration: none;}
a:link {text-decoration: none;}
a:-webkit-any-link {text-decoration: none;}
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;outline:none !important; -webkit-appearance: none;}
* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}

/* 大布局样式 */
.lybbn-panel {display: flex;flex-flow: column;}
.lybbn-panel-wrapper {display: flex;flex:1;overflow: auto;}

/* 全局滚动条样式 */
.scrollable {-webkit-overflow-scrolling: touch;}
::-webkit-scrollbar {width: 8px;height: 8px;}
// ::-webkit-scrollbar-thumb {background-color: rgba(86, 85, 85, 0.3);} 
::-webkit-scrollbar-thumb {background-color: rgba(136, 132, 132, 0.3);};
::-webkit-scrollbar-thumb:hover {background-color: rgba(86, 85, 85, 0.6);}
::-webkit-scrollbar-track {background-color: rgba(86, 85, 85, 0.1);}
::-webkit-scrollbar-track:hover {background-color: rgba(86, 85, 85, 0.2);}

/* 头部 */
.lybbn-panel-header {height: 48px;background: var(--ly-header-bg);color: #fff;display: flex;justify-content:space-between;}
.lybbn-panel-header-left {display: flex;align-items: center;padding-left:20px;flex-shrink: 0;}
.lybbn-panel-header-center {display: flex;align-items: center;}
.lybbn-panel-header-center a{font-size: 12px;color: #b5afaf;text-decoration: none;letter-spacing: .5px;}
.lybbn-panel-header-right {display: flex;align-items: center;flex-shrink: 0;}
.lybbn-panel-header .logo-bar {font-size: 20px;font-weight: bold;display: flex;align-items: center;}
.lybbn-panel-header .logo-bar .logo {margin-right: 10px;width: 35px;height: 35px;}
.lybbn-panel-header .nav {display: flex;height: 100%;margin-left: 40px;}
.lybbn-panel-header .nav li {padding:0 10px;margin: 0 10px 0 0;font-size: 14px;color: rgba(255, 255, 255, 0.6);list-style: none;height: 100%;display: flex;align-items: center;cursor: pointer;}
.lybbn-panel-header .nav li i {margin-right: 5px;}
.lybbn-panel-header .nav li:hover {color: #fff;}
.lybbn-panel-header .nav li.active {background: rgba(255, 255, 255, 0.1);color: #fff;}
.lybbn-panel-header .user-bar .panel-item:hover {background: rgba(255, 255, 255, 0.1)!important;}
.lybbn-panel-header .user-bar .user label{color: #fff;}

/* 左侧菜单 */
.lybbn-panel-side-split {width:65px;flex-shrink:0;background: #272E39;display: flex;flex-flow: column;}
.lybbn-panel-side-split-top {height: 49px;}
.lybbn-panel-side-split-top a {display: inline-block;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.lybbn-panel-side-split-top .logo {height:30px;vertical-align: bottom;}
.lybbn-panel-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;flex: 1;}
.lybbn-panel-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.lybbn-panel-side-split li i {font-size: 18px;}
.lybbn-panel-side-split li p {margin-top:5px;}
.lybbn-panel-side-split li:hover {background: rgba(255, 255, 255, 0.1);}
.lybbn-panel-side-split li.active {background-color: var(--el-color-primary-light-1) !important;color: var(--el-color-primary-light-8);}

.lybbn-panel-side-split-scroll::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.4);border-radius:5px;}
.lybbn-panel-side-split-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.5);}
.lybbn-panel-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
.lybbn-panel-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}

.lybbn-panel-side {background: var(--ry-menu-bg);display: flex;flex-flow: column;flex-shrink:0;width:var(--ry-menu-width);box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;transition:width 0.3s;}
.lybbn-panel-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
.lybbn-panel-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
.lybbn-panel-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
.lybbn-panel-side-bottom {border-top: 1px solid rgba(0,0,0,0.1);height:51px;cursor: pointer;display: flex;align-items: center;justify-content: center;}
.lybbn-panel-side-bottom i {font-size: 16px;}
.lybbn-panel-side-bottom:hover {color: var(--el-color-primary);}
.lybbn-panel-side.isCollapse {width: 65px;}
.lybbn-header-menu {flex: 1;min-width: 0;overflow: hidden;}
.lybbn-header-menu .el-menu {--el-menu-hover-bg-color: #171811 !important;height: 48px;}
.lybbn-header-menu .el-menu .el-sub-menu__title {background-color:transparent !important;}
.lybbn-header-menu .el-menu--horizontal>.el-menu-item.is-active {background-color:#171811 ;}
.el-menu .menu-tag {position: absolute;height: 18px;line-height: 18px;background: var(--el-color-danger);font-size: 12px;color: #fff;right: 20px;border-radius:18px;padding:0 6px;}
.el-menu .el-sub-menu__title .menu-tag {right: 40px;}
.el-menu--horizontal > li .menu-tag {display: none;}
.rymenu{background: var(--ry-menu-bg);}

/* 右侧内容 */
.lybbn-panel-body {flex: 1;display: flex;flex-flow: column;}

.lybbn-panel-topbar {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
.lybbn-panel-topbar .left-panel {display: flex;align-items: center;}
.lybbn-panel-topbar .right-panel {display: flex;align-items: center;}

.right-panel-search {display: flex;align-items: center;}
.right-panel-search > * + * {margin-left:10px;}

.lybbn-panel-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;}
.lybbn-panel-tags ul {display: flex;overflow: hidden;}
.lybbn-panel-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;flex-shrink: 0;}
.lybbn-panel-tags li::after {content: " ";width:1px;height:100%;position: absolute;right:0px;background-image: linear-gradient(#fff, #e6e6e6);}
.lybbn-panel-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;display: flex;align-items: center;}
.lybbn-panel-tags li i {margin-left:10px;border-radius: 3px;width:18px;height:18px;display: flex;align-items: center;justify-content: center;}
.lybbn-panel-tags li i:hover {background: rgba(0,0,0,.2);color: #fff;}
.lybbn-panel-tags li:hover {background: #ecf5ff;}
.lybbn-panel-tags li.active {background: #409EFF;}
.lybbn-panel-tags li.active a {color: #fff;}
.lybbn-panel-tags li.sortable-ghost {opacity: 0;}

.lybbn-panel-main {overflow: auto;background-color: #f6f8f9;flex: 1;}

/*页面最大化*/
.lybbn-panel.main-maximize {
	.main-maximize-exit {display: block;}
	.lybbn-panel-side-split, .lybbn-panel-side, .lybbn-panel-header, .lybbn-panel-topbar, .lybbn-panel-tags {display: none;}
}
.main-maximize-exit {display: none;position: fixed;z-index: 3000;top:-20px;left:50%;margin-left: -20px;border-radius: 50%;width: 40px;height: 40px;cursor: pointer;background: rgba(0,0,0,0.2);text-align: center;}
.main-maximize-exit i {font-size: 14px;margin-top: 22px;color: #fff;}
.main-maximize-exit:hover {background: rgba(0,0,0,0.4);}

/*定宽页面*/
.lypage {width: 1230px;margin: 0 auto;}

/*系统图标*/
.ico-linux {
	background-image: url("");
	background-repeat: no-repeat;padding-left: 30px;background-size: contain;height: 20px;
}

.ico-windows {
	background-image: url("");
	background-repeat: no-repeat;padding-left: 30px;background-size: contain;height: 20px;
}

.ico-centos {
	background-image: url("");
	background-repeat: no-repeat;padding-left: 30px;background-size: contain;height: 20px;
}

.ico-ubuntu {
	background-image: url("");
	background-repeat: no-repeat;padding-left: 30px;background-size: contain;height: 20px;
}

.ico-debian {
	background-image: url("");
	background-repeat: no-repeat;padding-left: 30px;background-size: contain;height: 20px;
}

.ico-fedora {
	background-image: url("");
	background-repeat: no-repeat;padding-left: 30px;background-size: contain;height: 20px;
}

.lytask-drawer{
	.el-drawer__body {
		overflow: auto;
		padding: 0;
	}
	.el-container{
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.el-drawer__header{
		flex-direction:row-reverse;
	}
	.el-tabs__header{
		margin: 0;
	}
}

.ryhelp-tips{
	font-size: 12px;
	word-break: break-all;
	display: inline-block;
	width: 100%;
	color:rgb(161, 158, 158)
}

.lybbnMessageBoxClass .el-message-box__status{
	font-size: 30px !important;
}
.lybbnMessageBoxClass .el-message-box__title {
	font-size: 20px !important;
	font-weight: bold;
}
.lyicon-loading{
	animation: rotating 2s linear infinite;
}

.ly-is-full{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	background:var(--el-bg-color);
}

.tableSelect{
	margin-bottom: 10px;
	flex-shrink: 0; /* 防止搜索区域被压缩 */
	.el-form{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.el-form-item{
		margin: 5px !important;
	}
	.el-card__body{
		padding: 10px;
	}
}

.table-operate-btn {
    display: inline-block;
    cursor: pointer;
    margin-right: 8px;
    white-space: nowrap;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 3px;
    transition: all 0.3s ease;
	color: var(--el-color-primary);
    
    &:last-child {
        margin-right: 0;
    }
    
    &:hover {
        background-color: rgba(64, 158, 255, 0.08);
    }
    
    &.edit {
        color: var(--el-color-primary);
        
        &:hover {
            color: var(--el-color-primary-light-1);
        }
    }
    
    &.detail {
        color: var(--el-text-color-regular);
        
        &:hover {
            color: var(--el-text-color-primary);
        }
    }
    
    &.delete {
        color: var(--el-color-danger);
        
        &:hover {
            
        }
    }

	&.warning {
        color: var(--el-color-warning);
        
        &:hover {
            
        }
    }
    
    &.color99 {
        color: #999999;
        cursor: default;
        
        &:hover {
            background-color: transparent;
        }
    }
}

.lycontainer{
	padding:10px;
	display: flex;
    flex-direction: column;
	height: 100%;
    width: 100%;
}
.lytable{
	flex: 1;
    display: flex;
    flex-direction: column;
}
.lytopaction{
	display: flex;
	padding: 0 !important;
	height: 50px;
	border-bottom: unset !important;
	flex-shrink: 0; /* 禁止收缩 */
	.left-panel {display: flex;align-items: center;}
	.right-panel {display: flex;align-items: center;}
}
.lytable .el-table__body-wrapper {
    background: unset !important;
}
.lytable .el-card__body{
	padding: 10px;
	height: 100%;
}
.lyflexcenter{
	display: flex;
	align-items: center;
}
.lydrawer{
	.el-drawer__header{
		margin-bottom:5px !important;
		padding: 15px;
		border-bottom: 1px solid var(--el-border-color-light);
	}
	.el-drawer__footer{
		background: var(--el-bg-color);
		border-top: 1px solid var(--el-border-color-light);
		padding: 13px 15px !important;
	}
}

.lybody-padding-0{
	padding:0 !important;
}
.lybody-padding-10{
	padding:10px !important;
}
.lybody-padding-20{
	padding:20px !important;
}

.w-e-full-screen-container{
	z-index: 4000 !important;
}